<template>
    <div>
        <Form ref="form" :model="roleData" :label-width="90" style="height:30px">
            <Row :gutter="24" type="flex" justify="end">
            <Col v-bind="grid">
                    <FormItem label="角色名称：">
                        <Input v-model="roleData.roleName" placeholder="请输入角色名称" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="角色编码：" >
                        <Input v-model="roleData.roleCode" maxlength="20" placeholder="请输入角色编码" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem >
                        <Button type="default" icon="md-search" style="margin-left:5px" @click="handleSubmit"></Button>&nbsp;&nbsp;
                        <Button type="default" icon="md-refresh" @click="handleReset"></Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <Table
            ref="table"
            :columns="tableColumns"
            :data="list"
            :loading="loading"
            :size="tableSize"
            class="ivu-mt"
            @on-select="handleSelect"
            @on-select-cancel="handleSelectCancel"
            @on-select-all="handleSelectAll"
            @on-select-all-cancel="handleClearSelect">
            <template slot-scope="{ row }" slot="name">
                {{ row.roleName }}
            </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
            <Page
                :total="pageNation.total"
                :page-size-opts="pageSizeOpts"
                :current.sync="pageNation.pageNumber"
                show-total
                show-sizer
                show-elevator
                :page-size="pageNation.pageSize"
                @on-change="handleChangePage"
                @on-page-size-change="handleChangePageSize"
            />
        </div>
    </div>
</template>
<script>
    import {cloneDeep} from "lodash";
    export default {
        data () {
            return {
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                roleData: {
                    id: '',
                    roleName: '',
                    roleCode: '',
                    roleDescrib: '',
                    systemId: ''
                },
                columns: [
                    {type: 'selection',minWidth: 60,align: 'center',show: true},
                    {title: '角色名称',key: 'roleName',minWidth: 140,show: true},
                    {title: '角色编码',key: 'roleCode',minWidth: 140,show: true},
                    {title: '角色描述',key: 'roleDescrib',minWidth: 140,show: true},
                    {title: '所属系统',key: 'systemId', slot: 'system',minWidth: 140,show: false},
                ],
                loading: false,
                list: [],
                selectedData: [],
                tableSize: 'default',
                roleInfo: null, // 当前选中的角色信息
                pageSizeOpts:[10,30,50,100],
                pageNation:{total:0,pageSize:10,pageNumber:1},
                selectedRoleData:[],
                roleObject:null,
            }
        },
        props: {
            selectedRoleIds:{
                default:()=>{
                    return []
                }
            }
        },
        computed: {
            // 动态设置列
            tableColumns () {
                const columns = [...this.columns];
                return columns.filter(item => item.show);
            },
            offset () {
                return (this.current - 1) * this.limit;
            }
        },
        methods: {
            getData () {
                if (this.loading) return;
                this.loading = true;
                // 下面的 params 是获取的表单查询参数
                this.pageNation.total = 0;
                this.list = [];
                let condition = "";
                const params = this.roleData;
                if (params.roleName != null && params.roleName != "") {
                    condition+="roleName like '%"+params.roleName+"%'";
                }

                if (params.roleCode != null && params.roleCode != "") {
                    condition+="roleCode like '%"+params.roleCode+"%'";
                }

                this.$api.Role.queryByPage(this.pageNation.pageNumber,this.pageNation.pageSize, {condition}).then(res => {
                    res.records.forEach(item => {
                        let ids = this.selectedRoleIds.filter(id => id == item.id);
                        if (ids.length > 0) {
                            item._checked = true;
                        } else {
                            item._checked = false;
                        }
                    })
                    this.selectedRoleData = cloneDeep(this.selectedRoleIds);
                    this.list = cloneDeep(res.records);
                    this.pageNation.total = res.recordCount;
                    this.pageNation.pageNumber = res.pageNumber;
                    this.pageNation.pageSize = res.pageSize;
                }).finally(()=>{
                    this.loading = false;
                });
            },
            handleSubmit () {
                 this.getData();
            },
            handleReset () {
                this.roleData={};
                this.getData();
            },
            // 刷新表格数据
            handleRefresh () {
                this.getData();
            },
            // 切换页码
            handleChangePage (page) {
                this.pageNation.pageNumber = page;
                this.getData();
            },
            // 切换每页条数
            handleChangePageSize (size) {
                this.pageNation.pageNumber = 1;
                this.pageNation.pageSize = size;
                this.getData();
            },
            // 选中一项，将数据添加至已选项中
            handleSelect (selection, row) {
                this.selectedRoleData.push(row.id);
            },
            // 取消选中一项，将取消的数据从已选项中删除
            handleSelectCancel (selection, row) {
                const index = this.selectedRoleData.findIndex(id => id === row.id);
                this.selectedRoleData.splice(index, 1);
            },
            // 当前页全选时，判断已选数据是否存在，不存在则添加
            handleSelectAll (selection) {
                selection.forEach(item => {
                    if (this.selectedRoleData.findIndex(id =>id === item.id) < 0) {
                        this.selectedRoleData.push(item.id);
                    }
                });
            },
            handleGetRoleIds(ids) {
                this.selectedRoleData.forEach(item => {
                    if (ids.indexOf(item.id) == -1) {
                        ids.push(item.id);
                    }
                });
                return ids;
            },
            // 清空所有已选项
            handleClearSelect () {
                this.selectedRoleData = [];
            }
        }
    }
</script>
